<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .list{
      width: 150px;
      height: 200px;
    }
  </style>
  <script>
    function $(id){
      return document.getElementById(id);
    }

    function moveRight(){
      //得到左边下拉框的数组
        var opArray = $("leftSelect").getElementsByTagName("option");
        for(let i=0;i<opArray.length;i++){
          if(opArray[i].selected == true){
             $("rightSelect").appendChild(opArray[i--]);
          }
        }
    }
  </script>
</head>
<body>
    <select class="list" multiple id="leftSelect">
      <option>库里</option>
      <option>詹姆斯</option>
      <option>利拉德</option>
      <option>安东尼</option>
      <option>刘翔</option>
    </select>
    <input type="button" value=">" onclick="moveRight()">
    <input type="button" value=">>">
    <input type="button" value="<">
    <input type="button" value="<<">
    <select class="list" multiple id="rightSelect"></select>
</body>
</html>
